const path = require('path');
const fs = require('fs');


// [\S\s]+     把所有字符都匹配
// \s => 空白字符  \S  => 非空白字符   + 匹配 >=1
let regStyle = /<style>([\S\s]+)<\/style>/;
let regScript = /<script>([\S\s]+)<\/script>/;

// D:\WebstormProjects\js-learn\node\clock


//   console.log(__dirname);
fs.readFile(path.join(__dirname, 'index.html'), (err, dataStr) => {
  if (!err) {
    let string = dataStr.toString();

    // 读取HTML 文件成功后, 调用对应的方法, 拆解出html、css和js
    resolveCSS(string)
    resolveJS(string)
    resolveHTML(string)
  } else {
    console.log(`读取HTML文件失败! ${err.message}`)
  }

})

function resolveCSS(htmlStr) {
  let r1 = regStyle.exec(htmlStr);

  // let newCSS = r1[0].replace('<style>', '').replace('</style>', '');
  let newCSS = r1[1];

  fs.writeFile(path.join(__dirname, 'index.css'), newCSS, (err) => {
    if (err) {
      console.log(`写入 CSS 样式失败 ${err.message}`)
      return
    }
    console.log(`写入 CSS 样式成功`)
  })
}

function resolveJS(htmlStr) {
  let r1 = regScript.exec(htmlStr);

  // let newJS = r1[0].replace('<script>', '').replace('</script>', '');
  let newJS = r1[1];

  fs.writeFile(path.join(__dirname, 'index.js'), newJS, (err) => {
    if (err) {
      console.log(`写入 JS 失败 ${err.message}`)
      return
    }
    console.log(`写入 JS 成功`)
  })
}

function resolveHTML(htmlStr) {
  // 使用字符串的 replace方法, 把内嵌的 <style> 和 <script> 标签,
  // 替换为外联的<link> 和 <script> 标签

  let newHTML = htmlStr.replace(regStyle, '<link href="./index.css" rel="stylesheet">')
    .replace(regScript, '<script src="./index.js"></script>');

  fs.writeFile(path.join(__dirname, 'newIndex.html'), newHTML, (err) => {
    if (err) {
      console.log(`写入 HTML 失败 ${err.message}`)
      return
    }
    console.log(`写入 HTML 成功`)
  })
}


